<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<h:outputText value="Travel Expense Claims"
			styleClass="outputTextTitle" />
		<h:form>

			<h:panelGrid columns="2" style="width: 100%"
				columnClasses="gridCellMiddleLeftAligned, gridCellBottomRightAligned">
				<p:menuButton value="#{travelReimbursementBean.selectedButton}"
					style="width:400px;">

					<p:menuitem value="Create Travel Reimbursement"
						actionListener="#{travelReimbursementBean.buttonChangeListner}"
						update="@form"></p:menuitem>
					<p:menuitem value="Edit Travel Reimbursement"
						actionListener="#{travelReimbursementBean.buttonChangeListner}"
						update="@form"></p:menuitem>
					<p:menuitem value="View Travel Reimbursement"
						actionListener="#{travelReimbursementBean.buttonChangeListner}"
						update="@form"></p:menuitem>
				</p:menuButton>
				
				<h:outputText value="[NOTE: Recmd - Recommendation Status, Apprv - Approval Status]" 					rendered="#{travelReimbursementBean.selectedButton eq 'Edit Travel Reimbursement' or (travelReimbursementBean.selectedButton eq 'View Travel Reimbursement')}"/>
			</h:panelGrid>

			<h:panelGrid style="width: 100%"
				rendered="#{travelReimbursementBean.travelRequestListRender}">
				<p:dataTable paginator="true" rows="20" paginatorPosition="bottom"
					id="travelReimbursementDetails"
					value="#{travelReimbursementBean.travelRequestList}"
					var="travelRequest"
					rendered="#{travelReimbursementBean.selectedButton eq 'Create Travel Reimbursement'}">


					<p:column headerText="S No" style="width: 30px;">  
						<h:outputText value="#{travelRequest.sNo}" style="float: right" />
					</p:column>

					<p:column headerText="Travel Request Details">  
						<h:outputText value="#{travelRequest.travelRequestCode} - (#{travelRequest.travelFrom_DO} to #{travelRequest.travelTo_DO} - #{travelRequest.travelType})"
							rendered="#{travelRequest.travelType eq 'DOMESTIC'}" />
						<h:outputText value="#{travelRequest.travelRequestCode} - (#{travelRequest.travelFrom_OS} to #{travelRequest.travelTo_OS} - #{travelRequest.travelType})"
							rendered="#{travelRequest.travelType eq 'OVERSEAS'}" />
						<h:outputText value="#{travelRequest.travelRequestCode} - (#{travelRequest.travelFrom_DO} to #{travelRequest.travelTo_DO} - #{travelRequest.travelType})"
							rendered="#{travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}" />
					</p:column>

					<p:column headerText="Status" style="width: 80px;"> 
						<h:outputText value="#{travelRequest.travelStatus}" />
					</p:column>

					<p:column style="width: 60px;" 
						rendered="#{travelReimbursementBean.selectedButton eq 'Create Travel Reimbursement'}">
						<p:commandButton
							action="#{travelReimbursementBean.createExpenseFormAction}"
							value="Claim"
							disabled="#{travelRequest.disableCreateExpenseButton}">
							<f:param id="travelId" name="travelId"
								value="#{travelRequest.travelRequestCode}" />
							<f:param id="employeeId" name="employeeId"
								value="#{travelReimbursementBean.wamUser.employee.employeeCode}" />
						</p:commandButton>
					</p:column>

				</p:dataTable>

				<!-- EDIT OR VIEW TABLE -->

				<p:dataTable paginator="true" rows="20" paginatorPosition="bottom"
					value="#{travelReimbursementBean.travelExpenseList}" style="margin-top: -2px;"
					var="travelexpense"
					rendered="#{travelReimbursementBean.selectedButton eq 'Edit Travel Reimbursement' or (travelReimbursementBean.selectedButton eq 'View Travel Reimbursement')}">


					<p:column headerText="S No" style="width: 30px;">  
						<h:outputText value="#{travelexpense.sNo}" style="float: right" />
					</p:column>

					<p:column headerText="Travel Request Details">  
						<h:outputText value="#{travelexpense.travelRequest.travelRequestCode} - (#{travelexpense.travelRequest.travelFrom_DO} to #{travelexpense.travelRequest.travelTo_DO} - #{travelexpense.travelRequest.travelType})"
							rendered="#{travelexpense.travelRequest.travelType eq 'DOMESTIC'}" />
						<h:outputText value="#{travelexpense.travelRequest.travelRequestCode} - (#{travelexpense.travelRequest.travelFrom_OS} to #{travelexpense.travelRequest.travelTo_OS} - #{travelexpense.travelRequest.travelType})"
							rendered="#{travelexpense.travelRequest.travelType eq 'OVERSEAS'}" />
						<h:outputText value="#{travelexpense.travelRequest.travelRequestCode} - (#{travelexpense.travelRequest.travelFrom_DO} to #{travelexpense.travelRequest.travelTo_DO} - #{travelexpense.travelRequest.travelType})"
							rendered="#{travelexpense.travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}" />
					</p:column>
					
					<p:column headerText="Expense Code">
						<h:outputText value="#{travelexpense.travelExpenseCode}" />
					</p:column>

					<p:column headerText="Request Date" style="width: 86px;">
						<h:outputText value="#{travelexpense.requestDate}">
							<f:convertDateTime pattern="dd-MMM-yyyy" 
								timeZone="#{travelReimbursementBean.timeZone}" />
						</h:outputText>
					</p:column>

					<p:column headerText="Status" style="width: 146px;">
						<h:outputText value="Recmd: " style="font-weight: bold" />
						<h:outputText value="#{travelexpense.recommenderStatus}"  />
						<br />
						<h:outputText value="Apprv : " style="font-weight: bold" /> 
						<h:outputText value="#{travelexpense.approverStatus}"  />
					</p:column>


					<p:column headerText="Edit" style="width: 60px; text-align: center;"
						rendered="#{travelReimbursementBean.selectedButton eq 'Edit Travel Reimbursement'}">
						<p:commandButton
							action="#{travelReimbursementBean.editExpenseFormAction}"
							value="EDIT"
							disabled="#{(travelexpense.approverStatus eq 'Approved' or travelexpense.recommenderStatus eq 'Recommended') and (travelexpense.approverStatus ne 'Rejected' and travelexpense.recommenderStatus ne 'Rejected')}">
							<f:param id="travelId1" name="travelId1"
								value="#{travelexpense.travelRequest.travelRequestCode}" />
							<f:param id="travelExpenseCode" name="travelExpenseCode"
								value="#{travelexpense.travelExpenseCode}" />
						</p:commandButton>
					</p:column>

					<p:column style="width: 100px; text-align: center;"
						rendered="#{travelReimbursementBean.selectedButton eq 'View Travel Reimbursement'}">
						<p:commandButton
							action="#{travelReimbursementBean.viewExpenseFormAction}"
							value="View/Print">
							<f:param id="travelId2" name="travelId2"
								value="#{travelexpense.travelRequest.travelRequestCode}" />
							<f:param id="expenseCode" name="expenseCode"
								value="#{travelexpense.travelExpenseCode}" />
						</p:commandButton>
					</p:column>

				</p:dataTable>

			</h:panelGrid>

		</h:form>
	</ui:define>
</ui:composition>